<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css盒子模型</title>   <style>
        body{background-image: url(666.jpg);}
    </style>
   </head> 
<body>
    <div >
        <p class="one"><img src="蔡徐坤2.jpg" alt="很帅的图片"width=300px height="100" ></p1>
        <p class="two"><img src="蔡徐坤.jpg" alt=""width=300px height="100px"></p>
    </div>
    <style>
        div {
            width: 400px;
            height: 300px;
            background-color: rgb(234, 122, 159);
            padding: 20px 70px 60px 30px;
            border: 20px solid rgb(213, 16, 184) ;
            border-color: rgb(130, 22, 180) rgb(55, 217, 212)red rgb(131, 209, 63);
            border-width: 10px 30px 50px 70px;
            position: fixed;
            left: 500px;
           top: 200px;
          background-image: url(背景.jpg);
          border-style: dashed groove ridge outset;
        }
        .one{  padding: 0px 0px 0px 0px;
            border: 10px  solid rgb(95, 203, 232);
            border-width: 20px 20px 20px 20px;
            width: 300px;
            height: 100px;
            margin: 10px;
        
            
        }
        .two{  padding: 0px 0px 0px 0px;
            border: 10px  solid rgb(199, 88, 169);
            border-width: 20px 20px 20px 20px;
            width: 300px;
            height: 100px;
            margin: 40px;
        
        }
        </style>
    </body>
</html>